<template>
	<view v-for="(item,index) in repairCaseList" :key="index" class="repair-item">
		<view class="repair-box ss-p-24 ss-flex ss-row-between">
			<view class="fs-28 font-w-500">维修方案{{ index + 1 }}</view>
			<z-icon @tap.stop="emits('delCase',index)" v-if="!isSelect" name="trash" builtIn color="#C5C5C5"></z-icon>
			<block v-else>				
				<z-icon @tap.stop="changeCheck(index)" v-if="!readOnly" :name="item.check?'checked':'check'" color="#C5C5C5"></z-icon>
			</block>
		</view>
		<view :style="{backgroundColor:`rgba(0,0,0,${item.check?'0':'0.1'})`}">
			<view class="plan-item ss-p-24 box-sizing">
				<view @tap="getRepairAdmin(1,index,item)" class="ss-flex ss-row-between">
					<view class="ss-flex">
						<z-icon name="icon-add" size="40rpx"></z-icon>
						<view class="fs-28 font-w-500 ss-m-l-20">配件</view>
					</view>
					<view v-if="!readOnly" class="fc-c5">长按删除</view>
				</view>
				<view @longpress="delItem(1,index,i,item)" v-for="(p,i) in item.peijian || []" :key="i" class="ss-flex ss-row-between ss-m-t-24">
					<view class="fc-dark6">{{ p.name }}</view>
					<input type="digit" :disabled="!item.check" :value="p.price" @input="e => getInput(e,index,i,1)" class="fs-28 ss-text-right" placeholder="请输入（元）" placeholder-class="fc-c5" />
				</view>
			</view>
			<view class="plan-item ss-p-24 box-sizing" style="border-top: none;">
				<view class="ss-flex ss-row-between">
					<view @tap="getRepairAdmin(2,index,item)" class="ss-flex">
						<z-icon name="icon-add" size="40rpx"></z-icon>
						<view class="fs-28 font-w-500 ss-m-l-20">调校</view>
					</view>
					<view v-if="!readOnly" class="fc-c5">长按删除</view>
				</view>
				<view @longpress="delItem(2,index,i,item)" v-for="(p,i) in item.tiaojiao || []" :key="i" class="ss-flex ss-row-between ss-m-t-24">
					<view class="fc-dark6">{{ p.name }}</view>
					<input type="digit" :disabled="!item.check" :value="p.price" @input="e => getInput(e,index,i,2)" class="fs-28 ss-text-right" placeholder="请输入（元）" placeholder-class="fc-c5" />
				</view>
			</view>
			<block v-if="!readOnly">
				<uv-textarea :disabled="!item.check" class="ss-m-t-24" height="268rpx" :modelValue="item.remake" @input="e => getTextArea(e,index)" :placeholder="`请输入维修方案${index + 1}的备注`"></uv-textarea>
			</block>
			<block v-else>
				<uv-textarea v-if="item.remake" disabled class="ss-m-t-24" height="268rpx" :modelValue="item.remake"></uv-textarea>
			</block>
		</view>
	</view>
	<z-popup v-model="selectShow" mode="left" bgColor="#F6F7F8">
		<view class="select-box ss-p-x-24 ss-p-b-24 box-sizing">
			<uv-status-bar />
			<!-- #ifdef MP-WEIXIN -->
			<uv-gap :height="sheep.$store('app').getSystemInfo().top / 2"></uv-gap>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<uv-gap height="10"></uv-gap>
			<!-- #endif -->
			<z-icon @tap="selectShow = !selectShow" name="arrow-left" builtIn color="#222" size="25"></z-icon>
			<view v-for="(item,index) in selectArr" :key="item.id" class="bg-white br-16 ss-p-20 ss-m-t-24">
				<view class="ss-flex ss-row-between">
					<view class="font-w-500 fs-28">{{ item.name }}</view>
					<z-icon name="arrow-down" size="32rpx"></z-icon>
				</view>
				<uv-line color="#eee" margin="24rpx 0 0"></uv-line>
				<view @tap="selectPeijian(item,p)" v-for="(p,i) in item.child" :key="p.id"  class="ss-m-t-24 ss-flex ss-row-between">
					<view class="ss-flex " >
						<z-icon name="icon-add" size="40rpx"></z-icon>
						<view class="fs-26 fc-dark6 ss-m-l-20">{{ p.name }}</view>
					</view>
					<z-icon :name="selectedIds.includes(p.id)?'checked':'check'"></z-icon>
				</view>
			</view>
		</view>
	</z-popup>
</template>

<script setup>
	import { watch } from "vue"
import sheep from "@/sheep"
	const props = defineProps({
		isSelect: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: [String],
			default: ''
		},
		readOnly:{
			type:Boolean,
			default:false
		}
	})
	const emits = defineEmits(['update:modelValue','change','delCase'])
	const selectShow = ref(false)
	const selectArr = ref([])
	const repairIndex = ref(0)
	const selectedIds = ref([])
	const currentType = ref(1)
	const repairCaseList = computed(() => {
		if(!props.modelValue) return []
		// console.log(JSON.parse(props.modelValue));
		return JSON.parse(props.modelValue)
	})
	watch(() => repairCaseList.value,(newModelValue) => {
		if(!newModelValue.length) return
		if(currentType.value == 1) {
			let paijianList = newModelValue[repairIndex.value]?.peijian
			selectedIds.value = paijianList.map(item => item.pejian_id)
		}else {
			let tiaojiaoList = newModelValue[repairIndex.value]?.tiaojiao
			selectedIds.value = tiaojiaoList.map(item => item.pejian_id)
		}
	},{deep:true})
	async function getRepairAdmin(type,index,item){
		if(!item.check) return
		repairIndex.value = index
		currentType.value = type
		const { code,data } = await sheep.$api.user.peijianlist({type})
		if(code != 1) return
		selectArr.value = data
		let newModelValue = JSON.parse(props.modelValue)
		if(type == 1) {
			let paijianList = newModelValue[repairIndex.value]?.peijian
			selectedIds.value = paijianList.map(item => item.pejian_id)
		}else {
			let tiaojiaoList = newModelValue[repairIndex.value]?.tiaojiao
			selectedIds.value = tiaojiaoList.map(item => item.pejian_id)
		}
		selectShow.value = !selectShow.value
	}
	function selectPeijian(item,p){
		let newModelValue = JSON.parse(JSON.stringify(repairCaseList.value))
		if(item.type == 1) {
			let paijianList = newModelValue[repairIndex.value]?.peijian
			let paijianids = paijianList.map(item => item.pejian_id)
			if(!paijianids.includes(p.id)) {
				paijianList.push({
					id:p.id,
					name:p.name,
					type:item.type,
					pejian_id:p.id,
					price:''
				})
			}else {
				let delIndex = paijianList.findIndex(item => item.pejian_id == p.id)
				paijianList.splice(delIndex,1)
			}
			newModelValue[repairIndex.value].peijian = paijianList
			// console.log(newModelValue);
			emits('update:modelValue',newModelValue)
			emits('change',newModelValue)
		}else if(item.type == 2) {
			let tiaojiaoList = newModelValue[repairIndex.value]?.tiaojiao
			let tiaojiaoids = tiaojiaoList.map(item => item.pejian_id)
			if(!tiaojiaoids.includes(p.id)) {
				tiaojiaoList.push({
					id:p.id,
					name:p.name,
					type:item.type,
					pejian_id:p.id,
					price:''
				})
			}else {
				let delIndex = tiaojiaoList.findIndex(item => item.pejian_id == p.id)
				tiaojiaoList.splice(delIndex,1)
			}
			newModelValue[repairIndex.value].tiaojiao = tiaojiaoList
			emits('update:modelValue',newModelValue)
			emits('change',newModelValue)
		}
	}
	function getInput(e,index,i,type){
		let newModelValue = JSON.parse(JSON.stringify(repairCaseList.value))
		if(type == 1) {
			newModelValue[index].peijian[i].price = e.detail.value
		}else if(type == 2) {
			newModelValue[index].tiaojiao[i].price = e.detail.value
		}
		emits('update:modelValue',newModelValue)
		emits('change',newModelValue)
	}
	function getTextArea(e,index){
		let newModelValue = JSON.parse(JSON.stringify(repairCaseList.value))
		newModelValue[index].remake = e
		emits('update:modelValue',newModelValue)
		emits('change',newModelValue)
	}
	function delItem(type,index,i,item){
		if(!item.check) return
		if(type == 1) {
			let newModelValue = JSON.parse(JSON.stringify(repairCaseList.value))
			newModelValue[index].peijian.splice(i,1)
			emits('update:modelValue',newModelValue)
			emits('change',newModelValue)
		}else if(type == 2) {
			let newModelValue = JSON.parse(JSON.stringify(repairCaseList.value))
			newModelValue[index].tiaojiao.splice(i,1)
			emits('update:modelValue',newModelValue)
			emits('change',newModelValue)
		}
	}
	function changeCheck(index){
		let newModelValue = JSON.parse(JSON.stringify(repairCaseList.value))
		newModelValue[index].check = newModelValue[index].check?false:true
		emits('update:modelValue',newModelValue)
		emits('change',newModelValue)
	}
</script>

<style lang="scss" scoped>
	.repair-item {
		.repair-box {
			background-color: #F6F7F8;
			border-radius: 4rpx 4rpx 0rpx 0rpx;
		}

		.plan-item {
			border: 1rpx solid #eee;
		}
	}

	.select-box {
		width: 526rpx;
	}
	
	:deep(.uv-border) {
		border-color: #eee !important;
	}
</style>